<!--  -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="form" :model="article" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-tiptap 
            v-model="article.content"
            :extensions="extensions"
            height="400" 
            lang="zh"/>
        </el-form-item>

        <el-form-item label="封面">
          <el-radio-group v-model="article.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
            
          </el-radio-group>
           <!-- <template>
            <el-upload
                class="avatar-uploader"
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
           </template> -->
        </el-form-item>
       
        <el-form-item label="频道">
          <el-select v-model="article.channel_id" placeholder="请选择频道">
            <el-option
              v-for="(item,index) in channels"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onpublish">发表</el-button>
          <el-button>存入草稿</el-button>
        </el-form-item>
      </el-form>
      <div></div>
    </el-card>
  </div>
</template>

<script>
import {
  // 需要的 extensions
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  Image,
  TextColor,
  Fullscreen
} from "element-tiptap";
import { getChannels, publishArticle, getOne } from "@/api/article";
// import element-tiptap 样式
import "element-tiptap/lib/index.css";
export default {
  name: "publish",
  components: {
    "el-tiptap": ElementTiptap
  },
  data() {
    return {
      article: {
        title: this.title,
        content: this.content,
        cover: {
          type: 0,
          images: []
        },
        channel_id: null
      },
      channels: null,
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new TodoItem(),
        new TodoList(),
        new Table(),
        new TableHeader(),
        new TableCell(),
        new TableRow(),
        new Image(),
        new TextColor(),
        new Fullscreen()
      ],
      // 编辑器的内容
      imageUrl: ''
    };
  },
  methods: {
    onpublish() {
         this.$confirm('确定要发布吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           publishArticle(this.article, false).then(res => {
      
      });
          this.$message({
            type: 'success',
            message: '发布成功!'
          })
           
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })        
        })
     
    },
    getChannels() {
      getChannels().then(res => {
        this.channels = res.data.data.channels;
      });
    },
    getOne() {
      getOne(this.$route.query.id).then(res => {
     
        this.article = res.data.data;
      });
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
  },
  created() {
    this.getChannels();
    if (this.$route.query.id) {
      this.getOne();
    } else {
    }
  }
};
</script>
<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>